import { ref } from 'vue'
import { defineStore } from 'pinia'
export const userThemeStore = defineStore('userTheme', () => {
    // 使用 ref 来确保 theme 是响应式的
    if(!localStorage.getItem('__theme__')){
        // 按照时间赋值
        const hour = new Date().getHours()
        if (hour >= 18 || hour < 6) {
            localStorage.setItem('__theme__', 'dark')
            console.log('当前时间：' + hour + '，自动切换到夜间模式');
        }else{
            localStorage.setItem('__theme__', 'light')
            console.log('当前时间：' + hour + '，自动切换到日间模式');
        }
    }
    const theme = ref(localStorage.getItem('__theme__') || 'light')

    // 将 theme 设置到 document.documentElement 上
    document.documentElement.setAttribute('data-theme', theme.value)

    // 定义切换主题的函数
    function toggleTheme() {
        theme.value = theme.value === 'dark' ? 'light' : 'dark'
        localStorage.setItem('__theme__', theme.value)
        document.documentElement.setAttribute('data-theme', theme.value)
    }

    return { theme, toggleTheme }
})
